<!DOCTYPE html>
<html>

<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>分配角色</title>

	<!-- Tell the browser to be responsive to screen width -->
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">


	<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
	<link rel="stylesheet" href="../plugins/iCheck/square/blue.css">
	<link rel="stylesheet" href="../plugins/morris/morris.css">
	<link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
	<link rel="stylesheet" href="../plugins/datepicker/datepicker3.css">
	<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
	<link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
	<link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css">
	<link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.css">
	<link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.theme.default.css">
	<link rel="stylesheet" href="../plugins/select2/select2.css">
	<link rel="stylesheet" href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
	<link rel="stylesheet" href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.css">
	<link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
	<link rel="stylesheet" href="../plugins/bootstrap-slider/slider.css">
	<link rel="stylesheet" href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="../js/jwt-decode.js"></script>
</head>

<body class="hold-transition skin-purple sidebar-mini">

	<div class="wrapper">

		<!-- 页面头部 -->
		<header class="main-header">

			<!-- Logo -->
			<a href="common-index.html" class="logo">
				<!-- 侧边栏迷你logo，尺寸为50x50像素 -->
				<span class="logo-mini"><b>电子钱包</b></span>
				<!-- 常规状态和移动设备的logo -->
				<span class="logo-lg"><b>电子钱包</b>后台管理</span>
			</a>

			<!-- 头部导航栏：样式可以在header.less中找到 -->
			<nav class="navbar navbar-static-top">
				<!-- 侧边栏切换按钮 -->
				<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
					<span class="sr-only">Toggle navigation</span>
				</a>

				<div class="navbar-custom-menu">
					<ul class="nav navbar-nav">

						<li class="dropdown user user-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<img src="" class="user-image all-avatar-image">
								<span class="hidden-xs employee-name"></span>
							</a>

							<ul class="dropdown-menu">
								<!-- 用户图片 -->
								<li class="user-header">
									<img src="" class="img-circle all-avatar-image">

									<p class="employee-name"></p>
								</li>

								<li class="user-footer">
									<div class="pull-left">
										<a href="employee-info.html" class="btn btn-default btn-flat">修改信息</a>
									</div>
									<div class="pull-right">
										<a href="javascript:void(0);" class="btn btn-default btn-flat"
											id="logoutBtn">退出账号</a>
									</div>
								</li>
							</ul>
						</li>

					</ul>
				</div>
			</nav>
		</header>
		<!-- 页面头部 /-->

		<!-- 导航侧栏 -->
		<aside class="main-sidebar">
			<!-- 侧边栏：样式可以在sidebar.less中找到 -->
			<section class="sidebar">
				<!-- 侧边栏用户面板 -->
				<div class="user-panel">
					<div class="pull-left image">
						<img src="" class="img-circle all-avatar-image">
					</div>
					<div class="pull-left info">
						<p class="employee-name"></p>
						<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
					</div>
				</div>

				<ul class="sidebar-menu">
					<li class="header">菜单</li>

					<li id="admin-index"><a href="common-index.html"><i class="fa fa-dashboard"></i> <span>首页</span></a>
					</li>

					<!-- 菜单 -->

					<li class="treeview">
						<a href="#">
							<i class="fa fa-folder"></i>
							<span>系统管理</span>
							<span class="pull-right-container">
								<i class="fa fa-angle-left pull-right"></i>
							</span>
						</a>
						<ul class="treeview-menu">

							<li id="admin-role-manage">
								<a href="role-list.html">
									<i class="fa fa-circle-o"></i> 角色管理
								</a>
							</li>

							<li id="admin-datalist">
								<a href="employee-list.html">
									<i class="fa fa-circle-o"></i> 员工管理
								</a>
							</li>

							<li id="admin-user-manage">
								<a href="user-list.html">
									<i class="fa fa-circle-o"></i> 用户管理
								</a>
							</li>

							<li id="admin-profile">
								<a href="employee-info.html">
									<i class="fa fa-circle-o"></i> 个人中心
								</a>
							</li>

						</ul>
					</li>



					<li class="treeview">
						<a href="#">
							<i class="fa fa-pie-chart"></i> <span>业务管理</span>
							<span class="pull-right-container">
								<i class="fa fa-angle-left pull-right"></i>
							</span>
						</a>
						<ul class="treeview-menu">

							<li id="history-list">
								<a href="history-list.html">
									<i class="fa fa-circle-o"></i> 历史记录管理
								</a>
							</li>

						</ul>
					</li>

				</ul>
			</section>

		</aside>
		<!-- 导航侧栏 /-->

		<!-- 内容区域 -->

		<div class="content-wrapper">

			<!-- 内容头部 -->
			<section class="content-header">
				<h1>
					角色管理
					<small>分配权限</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
					<li><a href="#">角色管理</a></li>
					<li class="active">分配权限</li>
				</ol>
			</section>
			<!-- 内容头部 /-->

			<!-- 正文区域 -->
			<section class="content">

				<!-- .box-body -->
				<div class="box box-primary">
					<div class="box-header with-border">
						<h3 class="box-title">权限列表</h3>
					</div>

					<div class="box-body">

						<!-- 数据表格 -->
						<div class="table-box">

							<!--数据列表-->
							<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
								<thead>
									<tr>
										<th class="" style="padding-right:0px;">
										</th>
										<th class="">权限名</th>
										<th class="">权限描述</th>
									</tr>
								</thead>
								<tbody id="permissionList">
									<!-- <tr>
										<th class="" style="padding-right:0px;">
											<input type='checkbox' name='ids' class='icheckbox_square-blue'>
										</th>
										<th class="">权限名</th>
										<th class="">权限描述</th>
									</tr>
									<tr>
										<th class="" style="padding-right:0px;">
											<input type='checkbox' name='ids' class='icheckbox_square-blue'>
										</th>
										<th class="">权限名</th>
										<th class="">权限描述</th>
									</tr> -->
								</tbody>

								<tfoot>

								</tfoot>
							</table>
							<!--数据列表/-->
						</div>
						<!-- 数据表格 /-->

						<div class="col-md-10 data text-center">
							<button type="button" class="btn bg-maroon" id="saveButton" disabled>保存</button>
							<button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
						</div>
					</div>
					<!-- /.box-body -->


				</div>

			</section>
			<!-- 正文区域 /-->

		</div>
		<!-- @@close -->
		<!-- 内容区域 /-->

		<!-- 底部导航 -->
		<footer class="main-footer">
			<strong>Copyright &copy; <a href="">电子钱包</a>.</strong> All rights reserved.
		</footer>
		<!-- 底部导航 /-->

	</div>

	<script type="text/javascript">

		// 顶部与侧边栏信息渲染,注销按钮
		$(document).ready(function () {
			var token = localStorage.getItem('token');
			var longToken = localStorage.getItem('longToken');

			// 获取注销按钮
			var logoutBtn = $("#logoutBtn");

			// 为注销按钮添加点击事件
			logoutBtn.click(function () {
				// 清除本地存储的 token 和 longToken
				localStorage.removeItem('token');
				localStorage.removeItem('longToken');
				// 跳转到登录
				window.location.href = 'employee-login.html';
			});

			if (token && longToken) {
				var decoded = jwt_decode(longToken);
				var userId = decoded.userId;

				getInfo(userId, token, longToken);
			} else {
				// 跳转到登录页面
				window.location.href = 'employee-login.html';
			}
		});

		// 获取个人数据，渲染侧边栏和头部
		function getInfo(userId, token, longToken) {
			var url = 'http://localhost:8080/employee/findByIdController?userId=' + userId;

			if (token && longToken) {
				url += '&token=' + token + '&longToken=' + longToken;
			}

			// 发送 AJAX 请求获取数据
			$.ajax({
				url: url,
				method: 'get',
				success: function (result) {

					if (result.code === 200) {
						var datas = result.datas;
						var imageUrl = "http://localhost:8080/" + datas.imageAddress;

						var imgs = document.querySelectorAll('img.all-avatar-image');
						imgs.forEach(function (img) {
							img.src = imageUrl;
						});

						var elements = document.querySelectorAll('.employee-name');
						elements.forEach(function (el) {
							el.innerHTML = datas.userName;
						});

					} else if (result.code === 6000 || result.code === 4000) {
						// 跳转到登录
						window.location.href = 'employee-login.html';
					} else {
						alert("获取数据失败");
					}

				},
				error: function (xhr, status, error) {
					console.log("请求失败");
				}
			});
		}
	</script>


	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
	<script>
		$.widget.bridge('uibutton', $.ui.button);
	</script>
	<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="../plugins/raphael/raphael-min.js"></script>
	<script src="../plugins/morris/morris.min.js"></script>
	<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
	<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
	<script src="../plugins/knob/jquery.knob.js"></script>
	<script src="../plugins/daterangepicker/moment.min.js"></script>
	<script src="../plugins/daterangepicker/daterangepicker.js"></script>
	<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
	<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
	<script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
	<script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
	<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<script src="../plugins/fastclick/fastclick.js"></script>
	<script src="../plugins/iCheck/icheck.min.js"></script>
	<script src="../plugins/adminLTE/js/app.min.js"></script>
	<script src="../plugins/treeTable/jquery.treetable.js"></script>
	<script src="../plugins/select2/select2.full.min.js"></script>
	<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
	<script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
	<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
	<script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
	<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
	<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
	<script src="../plugins/ckeditor/ckeditor.js"></script>
	<script src="../plugins/input-mask/jquery.inputmask.js"></script>
	<script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
	<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
	<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
	<script src="../plugins/chartjs/Chart.min.js"></script>
	<script src="../plugins/flot/jquery.flot.min.js"></script>
	<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
	<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
	<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
	<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
	<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
	<script src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
	<script src="../plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>



	<script>
		$(document).ready(function () {
			// 选择框
			$(".select2").select2();

			// WYSIHTML5编辑器
			$(".textarea").wysihtml5({
				locale: 'zh-CN'
			});
		});

		// 设置激活菜单
		function setSidebarActive(tagUri) {
			var liObj = $("#" + tagUri);
			if (liObj.length > 0) {
				liObj.parent().parent().addClass("active");
				liObj.addClass("active");
			}
		}


		$(document).ready(function () {

			// 激活导航位置
			setSidebarActive("admin-role-manage");

			var token = localStorage.getItem('token');
			var longToken = localStorage.getItem('longToken');

			if (token && longToken) {

				generatePermissionList(token, longToken);
			} else {
				// 跳转到登录页面
				window.location.href = 'employee-login.html';
			}

			// 绑定保存按钮的 click 事件
			$('#saveButton').on('click', function () {
				// 在这里调用保存操作的函数
				saveData();
			});

		});

		// 权限列表
		function generatePermissionList(token, longToken) {
			// 发送 AJAX 请求获取所有角色信息
			$.ajax({
				url: "http://localhost:8080/permission/findAllController?token=" + token + '&longToken=' + longToken,
				type: "GET",
				success: function (result) {
					if (result.code == 200) {
						var permissions = result.datas;

						var urlParams = new URLSearchParams(window.location.search);
						var roleId = urlParams.get('roleId');

						if (roleId != null) {
							getRoleInfo(roleId, token, longToken, permissions)
						} else {
							window.location.href = 'common-404.html';
						}
					} else if (result.code == 4000) {
						// 跳转到登录页面
						window.location.href = 'employee-login.html';
					} else {
						alert(result.msg);
					}
				},
				error: function () { // 请求失败回调函数
					alert("请求错误"); // 弹出错误信息
				}
			});
		}


		// 获取角色信息
		function getRoleInfo(roleId, token, longToken, permissions) {

			$.ajax({
				url: "http://localhost:8080/role/findByIdController",
				type: "GET",
				data: {
					roleId: roleId,
					token: token,
					longToken: longToken
				},
				success: function (result) {

					if (result.code == 200) {

						// 获取返回的数据
						var role = result.datas[roleId];

						// 遍历所有权限信息，动态生成 tr 元素
						$.each(permissions, function (index, permission) {
							var tr = $("<tr></tr>");
							var checkbox = $("<input type='checkbox' name='ids' class='icheckbox_square-blue' value='" + permission.permissionId + "'>");
							var name = $("<td></td>").text(permission.permissionName);
							var desc = $("<td></td>").text(permission.permissionDesc);
							tr.append($("<th></th>").append(checkbox));
							tr.append(name);
							tr.append(desc);
							$("#permissionList").append(tr);

							if (Object.keys(result.datas).length !== 0) {
								// 判断当前角色是否具有该权限，如果是，则将复选框选中
								if (role.permissions.some(p => p.permissionId === permission.permissionId)) {
									checkbox.prop("checked", true);
								}
							}

							// 复选框的 change 事件
							$('input[name="ids"]').on('change', function () {
								// 判断是否有选中的复选框
								if ($('input[name="ids"]:checked').length > 0) {
									// 有选中的复选框，启用保存按钮
									$('#saveButton').prop('disabled', false);

								} else {
									// 没有选中的复选框，禁用保存按钮
									$('#saveButton').prop('disabled', true);
								}
							});

						});

					} else if (result.code == 4000) {
						// 跳转到登录页面
						window.location.href = 'employee-login.html';
					} else {
						alert(result.msg);
					}

				},
				error: function () {
					console.log("Error");
				}
			});
		}



		// 保存
		function saveData() {
			var selectedRoles = [];
			$('input[name="ids"]:checked').each(function () {
				selectedRoles.push($(this).val());
			});
			if (selectedRoles == null) {
				return;
			}

			var token = localStorage.getItem('token');
			var longToken = localStorage.getItem('longToken');
			if (!(token && longToken)) {
				// 跳转到登录页面
				window.location.href = 'employee-login.html';
			}

			var urlParams = new URLSearchParams(window.location.search);
			var roleId = urlParams.get('roleId');


			console.log(selectedRoles);
			var data = JSON.stringify({
				roleId: roleId,
				permissions: selectedRoles
			});
			$.ajax({
				url: 'http://localhost:8080/role/updatePermissionController?token=' + token + '&longToken=' + longToken,
				type: "POST",
				data: data,
				contentType: 'application/json',
				success: function (response) {
					if (response.code == 200) {
						// 跳转
						window.location.href = 'role-list.html';
					} else if (response.code == 4000) {
						// 跳转到登录页面
						window.location.href = 'employee-login.html';
					} else {
						alert(response.msg);
					}
				},
				error: function (xhr, status, error) {
					console.log(error);
				}

			});
		}

	</script>
</body>

</html>